<template>
  <list-page-container :page-title="pageTitle">
    <!--指明要插入query插槽-->
    <template slot="query">
      <div class="query-content-container flex-column full-container">
        <div class="query-form-container flex-row">
          <div class="form-container">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
                     label-width="68px">
              <el-form-item label="" prop="projectName">
                <el-input
                  v-model="queryParams.typeNo"
                  placeholder="请输入险种编号"
                  clearable
                  @keyup.enter.native="getListData"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="projectName">
                <el-input
                  v-model="queryParams.typeName"
                  placeholder="请输入险种名称"
                  clearable
                  @keyup.enter.native="getListData"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="projectName">
                <el-select v-model="queryParams.available" placeholder="请选择是否有效">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="">
                <el-button class="diy-bt" size="mini" @click="getListData">查 询</el-button>
              </el-form-item>
              <el-form-item label="" prop="">
                <el-button class="diy-bt" size="mini" @click="resetQuery">重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="handle-container flex-row">
          <el-button class="diy-bt" size="mini" @click="addData">新 增</el-button>
          <el-button class="diy-bt" size="mini" @click="exportData">导 出</el-button>
        </div>
      </div>
    </template>
    <!--指明要插入body插槽-->
    <template slot="body">
      <el-table
        class="diy-table"
        :data="listData"
        style="width: 100%;" height="100%">
        <el-table-column
          prop="typeNo"
          label="险种编号">
        </el-table-column>

        <el-table-column
          prop="typeName"
          label="险种名称">
        </el-table-column>

        <el-table-column
          prop="address"
          label="是否有效">
          <template slot-scope="scope">
            <span :class="scope.row.available == '1' ? ['effective-red'] : ['invalid-green']">{{scope.row.available == '1' ? '有效' : '无效'}}</span>
          </template>
        </el-table-column>

        <el-table-column width="150" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="goInfoPage(scope.row)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
  </list-page-container>
</template>

<script>
import {listPageMixins} from "@/views/business/mixins/listPageMixins";
import {delDept} from "@/api/system/dept";
/**
 * 引入接口中的方法用于查看险种清单及删除险种条目
 */
import {getDataAdminList,removeDataAdminList} from "@/api/business/dataAdministration";

export default {
  mixins: [listPageMixins],
  data() {
    return {
      pageTitle: '',
      queryParams: {
        typeNo: '',
        typeName:'',
        available:''
      },
      // 创建一个对象用于下拉列表使用
      options:[
        {
          value: '1',
          label: '有效'
        },
        {
          value: '0',
          label: '无效'
        }
      ]
    }
  },
  methods: {
    getListData() {
      this.startLoading()
      let owner = this
      //发送异步请求获取险种清单，并将返回的数组赋值给listData
      getDataAdminList(this.queryParams).then(res => {
        owner.listData = res.rows;


      }).finally(() => {
        this.endLoading()
      })


    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除?').then(function () {
        return removeDataAdminList({id:row.id});
      }).then(() => {
        this.getListData();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
